<template>
  <div style="padding: 15px;">
    <el-form label-width="80px">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="移位单号">
              <el-input readonly v-model="moveInfoDetail.code" style="width:75%" disabled />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="仓库">
              <el-select v-model="moveInfoDetail.warehouseCode" placeholder="请选择" disabled>
                <el-option v-for="item in warehouseList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <div class="grid-content bg-purple">
            <el-form-item label="备注" prop="shipmentCode" >
              <el-input readonly v-model="moveInfoDetail.remarks" style="width:75%" disabled />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <vxe-table
      ref="xTable"
      border
      resizable
      stripe
      highlight-current-row
      :align="allAlign"
      show-footer
      highlight-hover-row
      row-id="id"
      :loading="loading"
      auto-resize
      :data="tableData"
      :span-method="objectSpanMethod"
      :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
      sort-config.remote
      @sort-change="sortList"
    >
        <vxe-table-column type="seq" width="60" title="序号"></vxe-table-column>
        <vxe-table-column title="入驻商" field="shipmentName" min-width="200" />
        <vxe-table-column field="goodsName" min-width="200" title="商品名称"  />
        <vxe-table-column field="goodCode" min-width="200" title="商品编码"  />
        <vxe-table-column field="goodsBarCode" title="商品条码" min-width="200"  />
        <vxe-table-column field="goodsUnitName" title="单位" min-width="200"  />
        <vxe-table-column field="spaceName" title="库区" min-width="200"  />
        <vxe-table-column field="locationName" title="移出库位" min-width="200"  />
        <vxe-table-column field="moveQuantity" title="移出数量" min-width="200"  />
        <vxe-table-column field="status" title="移位状态" min-width="100" :formatter="formatterStatus" />
         <vxe-table-column field="targetLocationName" title="移入库位" min-width="200"  />
        <!--<vxe-table-column field="movedQuantity" title="移入数量" min-width="200"  /> -->
        <vxe-table-column field="gmtManufacture" title="生产日期" min-width="200"  />
        <vxe-table-column field="goodsStatusName" title="库存状态" min-width="200" />
        <vxe-table-column field="isLock" title="锁定状态" min-width="200"  :formatter="formatIsLock" />
        <vxe-table-column field="remarks" title="备注" min-width="200"  />
    </vxe-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="funcBack" plain>返 回</el-button>
    </div>

  </div>
</template>
<script>
import Vue from "vue";
import "xe-utils";
import VXETable from "vxe-table";
import "vxe-table/lib/index.css";
import XEUtils from "xe-utils";
import VXEUtils from "vxe-utils";
Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ["cookie"] });
import { getWarehouse, getLocation } from "@/api/basicInfo";
import { moveItemList, moveDetail,moveConfirm } from "@/api/store";
export default {
  name: "moveDetail",
  components: {},
  data() {
    return {
      spanArr: [], // 一个空的数组，用于存放每一行记录的合并数
      pos: 0, // spanArr 的索引
      contentSpanArr: [],
      message: "",
      loading: false,
      allAlign: "center",
      tableData: [],
      code: "",
      // 移库单信息
      moveInfoDetail: {
        code: "",
        remark: "",
        warehouseCode: "",
        warehouseName: "",
      },
      itemListQuery: {
        moveCode: this.code, //移位单号 ,
        pageNum: 1,
        pageSize: 10,
        sortField: "",
        sortType: "",
      },
      warehouseList: [],
      locationList: [],
    };
  },
  created() {
    this.code = this.$route.query.code;

    this.findWarehouseList();

    this.findLocationList();
    this.findMoveDetail();
    /*this.findMoveItemList();*/
  },
  methods: {
    // 翻译状态
    formatterStatus({ cellValue }) {
      if (cellValue === "0") {
        return "新增";
      } else if (cellValue === "1") {
        return "待审核";
      } else if (cellValue === "2") {
        return "审核通过";
      } else if (cellValue === "3") {
        return "驳回";
      } else if (cellValue === "4") {
        return "作废";
      }else if (cellValue === "11") {
          return "待移位";
      }else if (cellValue === "12") {
          return "移位中";
      }else if (cellValue === "13") {
          return "移位完成";
      }
    },

    formatIsLock({cellValue}){
      const isLockStaus = ['否', '是']
      return isLockStaus[cellValue]
    },

    getInfo(code) {
      this.code = code;
    },
    // 获取移位单主表
    findMoveDetail() {
      moveConfirm(this.code).then((response) => {
        this.moveInfoDetail = response.data;
        this.tableData = this.moveInfoDetail.moveRegisterVOList


        this.spanArr = [];
        this.contentSpanArr = [];
        for (var i = 0; i < this.tableData.length; i++) {
          if (i === 0) {
            this.spanArr.push(1);
            this.pos = 0;
            this.contentSpanArr.push(1);
            this.position = 0;
          } else {
            // 判断当前元素与上一个元素是否相同(第1和第2列)
            if (this.tableData[i].moveItemCode == this.tableData[i - 1].moveItemCode
            ) {
              this.spanArr[this.pos] += 1;
              this.spanArr.push(0);
              this.start = 1
            } else {
              this.spanArr.push(1);
              this.pos = i;
            }

          }
        }
      });
    },

    // 获取移位单明细列表
    findMoveItemList() {
      this.loading = true;
      moveItemList(this.itemListQuery).then((response) => {
        this.tableData = response.data.records;
        this.itemListQuery.total = response.data.total;
        this.loading = false;
      });
    },
    findWarehouseList(){
      getWarehouse().then((response)=>{
        this.warehouseList = response.data;
      })
    },

    findLocationList(){
      const params = {'warehouseCode': this.moveInfoDetail.warehouseCode}
      getLocation(params).then((response)=>{
        this.locationList = this.locationList.concat(response.data);
      })
    },
    // 排序
    sortList({ column, property, order }) {
      if (order) {
        this.listQuery.sortField = property;
        this.listQuery.sortType = order;
      } else {
        this.listQuery.sortField = "";
      }
      this.findMoveItemList();
    },

    // 分页handle
    handlePageChange({ currentPage, pageSize }) {
      this.itemListQuery.pageNum = currentPage;
      this.itemListQuery.pageSize = pageSize;
      this.findMoveItemList();
    },

    // 表格合并行
    objectSpanMethod({ row, rowIndex,column,  columnIndex }) {
      if(this.start == 1){
        if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5 || columnIndex === 6  || columnIndex === 7  ||columnIndex === 8  ||   columnIndex === 11||   columnIndex === 12||   columnIndex === 13||   columnIndex === 14||   columnIndex === 15||   columnIndex === 16) {
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
      }
    },
    // 返回
    funcBack() {
      this.$eventBus.$emit('refreshList')
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({
        path: "/kngl/move"
      });
    },

  },
};
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin: 150px auto;
    width: 175px;
  }
</style>
<style>

.vxe-table .vxe-body--column:not(.col--ellipsis),
.vxe-table .vxe-footer--column:not(.col--ellipsis),
.vxe-table .vxe-header--column:not(.col--ellipsis) {
  padding: 6px 0;
}
.vxe-toolbar{padding:0 0 10px 0}
</style>
